<template>
    <div class='EditList'>
        <list-box v-loading="loading" :list="listData" @onClick="clickKey" @onDelete="deleteKey">
            <el-button :loading="loading" @click="refresh" icon="el-icon-refresh-right" type="info" size="mini"></el-button>
            <el-button :disabled="loading" @click="drawerAddVisible = true" icon="el-icon-plus" type="success" size="mini">添加</el-button>
            <el-button type="text" size="mini" disabled v-show="!loading">总数：{{total}}</el-button>
        </list-box>

        <edit-details v-model="isDetails" :select_item="select_item" @edit="editKey"
        v-model:page-size="page_size" :total="total" v-model:current-page="page" 
        @current-change="load_list" @size-change="refresh"/>

        <add-key-value @refresh="refresh" v-model="drawerAddVisible"></add-key-value>
    </div>
</template>

<script>
import { page_sizes } from '@/settings'
import { p_error } from '@/utils/prompt';
import { defineComponent, reactive, toRefs, h } from 'vue';
import { mapGetters } from 'vuex'
import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
import { list_lrange, list_del, list_lset } from '@/api/key/list';
import AddKeyValue from '../comps/AddKeyValue'
import ListBox from '../comps/ListBox'
import EditDetails from '../comps/EditDetails';
export default defineComponent({
    name: 'EditList',
    components: { AddKeyValue, EditDetails, ListBox },
    setup(omprops, content) {
        const state = reactive({
            page_sizes,
            loading: true,
            drawerAddVisible: false, // 添加dialog是否显示 

            isDetails: false, // 详情是否打开
            select_item:undefined,
            edit: {
                index: '',
                oldIndex: '',
                value: '',
                oldValue: '',
                loading: false
            },

            listData: [],
            total: 0,
            page: 1,
            page_size: 20,
        })
        return toRefs(state)
    },
    props: [],
    computed: {
        ...mapGetters([
            'select_key',
            'key_type'
        ]),
    },
    watch: {
        select_key(n, o) {
                this.refresh()
        }
    },
    mounted() {
        this.refresh()
    },
    methods: {
        // 刷新
        refresh() {
             //主要判断没有正在加载(ing),切换key时，销毁不及时，会导致重复触发请求
            if (this.select_key == '' || this.key_type != 'list') {
                return
            }
            this.listData = []
            this.total = 0
            this.page = 1
            this.edit.loading = false
            this.isDetails = false
            this.load_list()
        },
        // 加载
        load_list() {
            this.listData = []
            this.loading = true
            list_lrange(this.select_key, this.page, this.page_size).then((res) => {
                this.total = res.data.map.total
                this.listData = res.data.list
            }).finally(() => {
                this.loading = false
            })
        },
        // 点击key
        clickKey(item) {
            this.select_item = JSON.parse(JSON.stringify(item))
            this.isDetails = true
        },
        // 
        editKey(data){
            this.select_item = data.new
            for (let i = 0; i < this.listData.length; i++) {
                const element = this.listData[i];
                if (element.index == data.old.index && element.value == data.old.value) {
                    element.value = data.new.value
                }
            }
        },
        // 删除
        deleteKey(item) {
            p_error(`确定要删除 ${this.select_key} -> ${item.index}:${item.value} 吗？这将不可以恢复`, (instance, done) => {
                instance.confirmButtonLoading = true
                list_del(this.select_key, item.index, item.value).then((res) => {
                    done()
                    ElNotification({
                        title: '删除成功',
                        message: `${item.index}：${item.value} 已被成功删除`,
                        type: 'success',
                    })
                    this.load_list()
                }).finally(() => {
                    instance.confirmButtonLoading = false
                })
            })
        },

        screen_editor() {
            ElMessage("开发中")
        }
    },
})
</script>

<style scoped lang="less">
// @import '@/assets/css/edit-list.less';
.EditList {
    padding-top: 3px;
    flex: 1;
    width: 100%;
    height: 100%;
    // max-height: 100%;
    display: flex;
    flex-direction: column;
}
</style>